<template>
    <!-- 列表页面 -->
    <div class="tableSample" v-if="!showList && !showEdit">
        <div class="header">
            <div class="header-left">
                <p class="title">公众号会员列表
                </p>
            </div>
            <div class="header-right">
                <lin-search @query="onQueryChangeOne" placeholder="请输入会员卡号"/>
            </div>
            <div class="header-right">
                 <lin-search @query="onQueryChange" placeholder="请输入昵称"/>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
                border
                v-loading="loading"
                :data="tableData"
                stripe>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="wechat.title"
                    label="会员卡号">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="nickname"
                    label="用户昵称">
            </el-table-column>
            <el-table-column label="头像">
                <template slot-scope="scope">
                    <el-image
                            style="width: 50px;"
                            :src="scope.row.headimgurl"
                            fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="province"
                    label="省份">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="city"
                    label="城市">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="sex_name"
                    label="性别">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="money"
                    label="账户余额">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="wechat.status"
                    label="会员等级">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="status_name"
                    label="状态">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="300">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleEditAdd(scope.row)"
                    >增加余额</el-button>
                    <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleEditMin(scope.row)"
                    >减少余额</el-button>
                    <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleList(scope.row)"
                    >余额记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :background="true"
                    :page-size="pageCount"
                    :current-page="currentPage"
                    v-if="refreshPagination"
                    layout="total, prev, pager, next, jumper"
                    :total="total_nums"
            ></el-pagination>
        </div>
    </div>
    <!-- 余额列表 -->
    <user-money v-else-if="showList" @listClose="listClose" :userId="userId" ></user-money>
</template>

<script>
import member from '@/models/member'
import LinSearch from '@/components/base/search/lin-search'
import UserMoney from './UserMoney'

export default {
  components: {
    UserMoney,
    LinSearch,
  },
  data() {
    return {
      tableData: [],
      loading: false,
      showList: false,
      showEdit: false,
      search: {
        nickname: '',
        user_no: '',
      },
      userId: 0,
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 30, // 每页10条数据
      total_nums: 0, // 分组内的总数
    }
  },
  computed: {},
  created() {
    this.loading = true
    // 获取数据
    this._getTableData(this.currentPage, this.pageCount)
  },
  methods: {
    // 操作列
    buttonMethods(func, row) {
      const self = this
      const { methods } = this.$options
      methods[func](self, row)
    },
    handleEditGrade(row) {
      const self = this
      self.$prompt('请输入会员等级名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'text',
      }).then(async ({ value }) => {
        // eslint-disable-next-line no-param-reassign
        self.loading = true
        const res = await member.updateMemberGrade({ grade_name: value, id: row.id })
        if (res.error_code === 0) {
          self.$message.success(`${res.msg}`)
        }
        self._getTableData(self.currentPage, self.pageCount)
      })
    },
    handleEditAdd(row) {
      const self = this
      self.$prompt('请输入金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'number',
      }).then(async ({ value }) => {
        // eslint-disable-next-line no-param-reassign
        self.loading = true
        const res = await member.updateUser({ type: 1, money: value, id: row.id })
        if (res.error_code === 0) {
          self.$message.success(`${res.msg}`)
        }
        self._getTableData(self.currentPage, self.pageCount)
      })
    },
    handleEditMin(row) {
      const self = this
      self.$prompt('请输入金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'number',
      }).then(async ({ value }) => {
        // eslint-disable-next-line no-param-reassign
        self.loading = true
        const res = await member.updateUser({ type: 2, money: value, id: row.id })
        if (res.error_code === 0) {
          self.$message.success(`${res.msg}`)
        }
        self._getTableData(self.currentPage, self.pageCount)
      })
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await member.getUserList(start, count, { nickname: this.search.nickname, user_no: this.search.user_no })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    handleList(val) {
      const self = this
      self.showList = true
      self.userId = Number(val.id)
    },
    handleEdit(val) {
      const self = this
      self.showEdit = true
      self.userId = Number(val.id)
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    listClose() {
      this.showList = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索姓名
    onQueryChange(query) {
      this.search.nickname = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索用户编号
    onQueryChangeOne(query) {
      this.search.user_no = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
  },
}
</script>

<style lang="scss" scoped>
    .tableSample {
        padding: 0 0 30px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;

                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .table-main {
            padding: 0 30px;
            margin-top: 30px;
        }

        .top-operate {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            margin-top: 30px;
        }

        .sort-input {
            width: 50px;
            background: none;
            justify-content: space-around;
        }

        .table-edit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cell-icon {
                cursor: pointer;
                color: #3963bc;
                font-size: 16px;
            }

            .cell-icon-edit {
                display: flex;
                margin-left: 20px;
                width: 50px;
                justify-content: space-between;

                .cell-cancel {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                }

                .cell-save {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                    margin-right: -20px;
                }
            }
        }

        .m-20 {
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .summary {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;

            img {
                width: 135px;
                height: 200px;
            }

            .demo-table-expand {
                font-size: 0;
                margin-left: 30px;
                display: flex;
                flex-direction: column;

                label {
                    width: 90px;
                    color: #99a9bf;
                }

                .el-form-item {
                    margin-right: 0;
                    margin-bottom: 0;
                    display: flex;
                    flex-direction: row;
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
    // dialog
    .tableSample /deep/ .el-dialog__footer {
        text-align: left;
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__header {
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__body {
        padding: 30px;
    }
</style>
